<template>
  <div>
    <div @keyup.enter="getData()">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.corp_name"
            placeholder="负责人查询"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            clearable
            placeholder="地址查询"
            :auto-top="true"
            @change="getData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :height="dialogHeight"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <invest-approve-self
      :visible.sync="reportVisible"
      :query-id="relatedData.customer_related_id"
      @success="handleEditSuccess"
    ></invest-approve-self>

    <review-file-credit
      :visible.sync="creditVisible"
      @success="handleEditSuccess"
      :related-data="editCredit"
    ></review-file-credit>

    <union-approval
      :visible.sync="approvalVisible"
      @success="getData"
      :related-data="editRow"
    ></union-approval>

    <attach-cmpt :visible.sync="attachVisible" :customer-related-id="attachRelatedId"></attach-cmpt>

    <el-dialog
      :visible.sync="creditCardVisible"
      :before-close="handleCreditClose"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
    >
      <el-tabs>
        <el-tab-pane label="调查报告">
          <credit-file :query-id="queryId"></credit-file>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog
      :visible.sync="investVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
    >
      <el-tabs>
        <el-tab-pane label="调查报告">
          <credit-file :query-id="queryId" :viewMode="true"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="项目审批表">
          <investigate-approve-view
            :query-id="reportData.customer_related_id"
            :process-status="reportData.process_status"
            v-if="+reportData.gua_type === 4"
            view-mode
          ></investigate-approve-view>
          <investigate-self
            v-if="+reportData.gua_type === 2"
            :query-id="reportData.customer_related_id"
            view-mode
          ></investigate-self>
          <review-credit-view
            v-if="+reportData.gua_type === 1"
            :related-data="reportData"
            view-mode
          ></review-credit-view>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="investVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <investigate-approve-dialog
      :visible.sync="provinceUnionVisible"
      :query-id="provinceUnionData.customer_related_id"
      :process-status="provinceUnionData.process_status"
      @success="handleEditSuccess"
    ></investigate-approve-dialog>
  </div>
</template>

<script>
import taskTableMixin from '@/credit/mixin/task/taskTable'
import { enumGuatype } from '@/credit/plugins/enumTown'
import InvestApproveSelf from '@/credit/views/city/self/components/investApprove/MainDialog'
import ReviewFileCredit from '@/credit/views/county/mission/ReviewFileCredit'
import SelectAddress from '@/components/select/SelectAddress'

import CreditFile from '@/credit/components/creditFile/InvestigateReport'
import AttachCmpt from '@/credit/views/city/program/Attach'
import AttachView from '@/credit/components/AttachView'
import UnionApproval from '@/credit/views/city/mission/UnionApproval'
import InvestigateSelf from '@/credit/views/city/self/components/investApprove/Main'
import ReviewCreditView from '@/credit/views/county/mission/components/ReviewCreditView'
import InvestigateApproveDialog from '@/credit/views/province/mission/components/InvestigateApproveDialog'
import InvestigateApproveView from '@/credit/views/province/mission/components/InvestigateApproveView'

export default {
  components: {
    InvestApproveSelf,
    ReviewFileCredit,
    SelectAddress,
    CreditFile,
    AttachCmpt,
    AttachView,
    InvestigateSelf,
    ReviewCreditView,
    UnionApproval,
    InvestigateApproveDialog,
    InvestigateApproveView,
  },
  mixins: [taskTableMixin],
  props: {
    visible: Boolean,
  },
  data() {
    return {
      enumGuatype,
      params: {
        index: 1,
        size: 10,
      },
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: 135 },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: 135 } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 110 } },
        { attrs: { label: '业务类型', prop: 'project_type', align: 'center' } },
        { attrs: { label: '项目状态', prop: 'itemStatusLabel', align: 'center' } },
        {
          attrs: { label: '调查报告', align: 'center', width: 100 },
          operations: [
            { content: '调查报告', icon: 'fa fa-file-text', event: this.handleView },
            { content: '附件', icon: 'fa fa-clipboard', event: this.handleAttach },
          ],
        },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              content: '操作',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              attrs: { class: 'p-1' },
              ifRender: row => +row.gua_type === 2 && +row.task_status === 0,
            },
            {
              content: '操作',
              icon: 'fa fa-gavel',
              event: this.handleCreidtEdit,
              attrs: { class: 'p-1' },
              ifRender: row => this.editButton(row),
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleCreditView },
          ],
        },
      ],
      relatedData: {},
      reportVisible: false,

      creditVisible: false,
      editCredit: {},

      attachVisible: false,
      attachRelatedId: '',
      creditCardVisible: false,
      queryId: '',

      reportData: {},
      investVisible: false,

      approvalVisible: false,
      editRow: {},

      provinceUnionVisible: false,
      provinceUnionData: {},
    }
  },
  computed: {
    order() {
      if (+this.status === 0) {
        return { item_date: 'desc' }
      } else {
        return {
          N1res_date: 'desc',
          N2res_date_bus: 'desc',
          N3res_date_risk: 'desc',
          N4res_date_corp: 'desc',
        }
      }
    },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    editButton(row) {
      if (![1, 4].includes(+row.gua_type)) {
        return false
      }
      if (+row.task_status !== 0) {
        return false
      }
      // 主管账号可以查询出调查审批任务，但是不能操作
      if (
        +row.task_type === 5 &&
        +row.gua_type === 4 &&
        row.res_a !== this.userId &&
        row.res_b !== this.userId
      ) {
        return false
      }
      return true
    },
    // getParams() {
    //   return this.params
    // },
    handleCreditView(row) {
      this.reportData = { ...row }
      this.investVisible = true
      this.queryId = row.customer_related_id
    },
    handleAttach(row) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },
    handleView(row) {
      this.creditCardVisible = true
      this.queryId = row.customer_related_id
    },
    getTabData() {
      this.getData()
    },
    handleCreidtEdit(row) {
      if (+row.gua_type === 1) {
        if (!row.city_res_a) {
          this.approvalVisible = true
          this.editRow = { ...row }
          return
        }
        this.creditVisible = true
        this.editCredit = { ...row }
      } else if (+row.gua_type === 4) {
        this.provinceUnionVisible = true
        this.provinceUnionData = { ...row }
      }
    },
    handleEdit(row) {
      this.relatedData = { ...row }
      this.reportVisible = true
    },
    getTip(row) {
      const inProcess = [
        'res_status',
        'res_status_bus',
        'res_status_risk_point',
        ['city_res_status,city_res_status_bus', 'city_res_status_risk_point,city_res_status_risk'],
        'res_status_risk',
        'res_status_corp',
      ]
      const outProcess = [
        'res_status',
        'res_status_bus',
        'res_status_risk_point',
        'res_status_risk',
        'res_status_corp',
        ['city_res_status,city_res_status_bus', 'city_res_status_risk_point,city_res_status_risk'],
        'review_approval',
        'city_res_status_corp',
      ]
      let getProcess = []
      if (+row.process_status === 0) {
        getProcess = [...inProcess]
      } else if (+row.process_status === 1) {
        getProcess = [...outProcess]
      }
      for (let p of getProcess) {
        let str = ''
        if (Array.isArray(p)) {
          const arrStr = []
          p.forEach(item => {
            arrStr.push(this.getStringTip(item.split(','), row))
          })
          str = arrStr.join('、')
        } else {
          str = this.getStringTip(p.split(','), row)
        }
        if (str) {
          return str
        }
      }
    },
    getStringTip(arr, row) {
      const enumStatus = {
        res_status: '项目经理',
        res_status_bus: '业务部负责人',
        res_status_risk_point: '风控部员工',
        res_status_risk: '风控部负责人',
        res_status_corp: '有权审批人',
        city_res_status: '省业务经理',
        city_res_status_bus: '省业务部负责人',
        city_res_status_risk_point: '省风控经理',
        city_res_status_risk: '省风控部负责人',
        review_approval: '审批委员会',
        city_res_status_corp: '省公司有权审批人',
      }
      for (let key of arr) {
        if (key === 'city_res_status_corp' && +row[key] === 1) {
          return '已通过'
        }
        if (key === 'review_approval') {
          if (+row[key] < 2) {
            return '待审批委员会审批'
          } else if (+row[key] === 2) {
            break
          }
        }
        if (+row[key] === 1) {
          break
        } else {
          if (+row[key] === 0) {
            return `待${enumStatus[key]}审批`
          } else if (+row[key] === 2) {
            return `${enumStatus[key]}审批不通过`
          }
        }
      }
      return ''
    },
    dataAdapter(item) {
      item.project_type = enumGuatype[+item.gua_type] || '-'
      let itemStatus = {}
      if (+item.gua_type === 2) {
        itemStatus = this.getResStatus(item)
      } else if (+item.gua_type === 4) {
        itemStatus = { label: this.getTip(item), css: '' }
      }
      if (+item.conversion_type === 0) {
        item.itemStatusLabel = itemStatus.label || '已通过'
        item.itemStatusStyle = itemStatus.css || 'success'
      } else {
        item.itemStatusLabel = '已拒绝'
        item.itemStatusStyle = 'danger'
        item.project_type = +item.conversion_type === 1 ? '联担业务' : '省联担业务'
      }

      return item
    },
    getResStatus() {
      // const res = resStatusMap.find(([{ key, value }]) => +item[key] === value)
      return {}
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleEditSuccess() {
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', true)
    },
    handleCreditClose() {
      this.creditCardVisible = false
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
